html,body{
    height: 100%;
    background-color: pink;
    padding: 0;
    margin: 0;
}
.cakeBox{
    width:320px;
    height: 370px;
    position: absolute;
    left: 10%;
    bottom: 0;
}
.cakeBox>img{
    width: 100%;
    height: 100%;
}
.button-style1{  
    position:absolute;  
    top:20%;  
    opacity:1;  
    z-index:100;  
}  
.button-style2{  
    position:absolute;  
    top:32%;  
    opacity:1;  
    z-index:100;  
}  
.button-style1 ,.button-style2 {  
    position:absolute;  
    left:20%;  
    animation:btn2 3s;
}  
@keyframes btn1 {  
    0% {  
        opacity:0.1;  
        left:43.5%;  
    }  
    70% {  
        opacity:0;  
        left:43.5%;  
    }  
    100% {  
        opacity:1;  
        left:20%;  
    }  
}  
@keyframes btn2 {  
    0% {  
        opacity:0;  
        left:43.5%;  
    }  
    70% {  
        opacity:0;  
        left:43.5%;  
    }  
    100% {  
        opacity:1;  
        left:68%;  
    }  
}  
.lk1,.lk2 {  
    text-decoration:none;  
    color:#fff;  
    transition:all 0.3s;  
}  
.link1,.link2 {  
    width:170px;  
    height:60px;  
    line-height: 30px;
    border:2px solid #fff;  
    -webkit-border:1px solid #fff;  
    border-radius:30px;  
    font-size: 18px;  
    text-align:center;  
    background: #ee9ca7;  
    transition:all 0.8s;  
}  
.link2 {  
    cursor:not-allowed;  
}  
.bt1 {  
    position:relative;  
    top:22%;  
    vertical-align:middle;  
}  
.bt2 {  
    position:relative;  
    bottom:22%;  
    vertical-align:middle;  
} 
  
a.lk1:hover { 
    color:#ee9ca7;  
    transition:all 0.5s;  
}  
.link1:hover {  
    background-color:#fff;  
    background-color:rgba(255,255,255,0,2);  
    border:2px solid #BBB;  
    transition:all 0.8s;  
}  
a.lk2:hover {  
    color:#ee9ca7;  
    transition:all 0.5s;  
}  
.link2:hover {  
    background-color:#fff;  
    background-color:rgba(255,255,255,0,2);  
    border:2px solid #BBB;  
    transition:all 0.8s;  
}  
